<%--
  Created by IntelliJ IDEA.
  User: zer
  Date: 2019/9/20
  Time: 19:02
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@taglib prefix="s" uri="/struts-tags" %>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=0.58,maximum-scale=1.0, user-scalable=no">

    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/ySelect.css">
    <link rel="stylesheet" type="text/css" href="http://cdn.bootcss.com/font-awesome/4.6.0/css/font-awesome.min.css">

    <script rel="script" src="js/bootstrap.min.js"></script>
    <script rel="script" src="js/jquery-2.1.1.min.js"></script>
    <script rel="script" src="js/ySelect.js"></script>

    <title>文件列表</title>
</head>
<body>
<div class="container">
    <div class="row" align="center">

        <div class="row">
            <img src="${pageContext.request.contextPath}/img/logo2.png">
        </div>

        <div class="row" id="list">
            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
                <select id='sort'>
                    <optgroup label="升序">
                        <option value="sortByUpLoadDateAsc">上传时间</option>
                        <option value="sortByFileNameAsc">文件名称</option>
                        <option value="sortByFileSizeAsc">文件大小</option>
                    </optgroup>
                    <optgroup label="降序">
                        <option value="sortByUpLoadDateDasc">上传时间</option>
                        <option value="sortByFileNameDasc">文件名称</option>
                        <option value="sortByFileSizeDasc">文件大小</option>
                    </optgroup>
                </select>
            </div>

            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
                <a href="${pageContext.request.contextPath}/ListAction_turnUpPage">上一页</a>
                <span>当前第:${page+1}页</span>
                <a href="${pageContext.request.contextPath}/ListAction_turnDownPage">下一页</a>
                <span>总共有: <fmt:formatNumber type="number" value="${(myFileList.size() + 9 - 1) / 9 - 0.5}"
                                             maxFractionDigits="0"/>页</span>
            </div>

            <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
                <select id='screen' multiple="multiple">
                    <option value="text">文本</option>
                    <option value="picture">图片</option>
                    <option value="office">office</option>
                    <option value="voice">音频</option>
                    <option value="video">视频</option>
                    <option value="other">其它</option>
                </select>
            </div>
            <div class="col-lg-1 col-md-1 col-sm-1 col-xs-1">
                <button id="screenBtn" class="btn btn-primary btn-sm">过滤</button>
            </div>
        </div>

        <div class="row">

            <s:iterator begin="(#session.page)*9"
                        end="%{(#session.page)*9+8 >= #session.myFileList.size-1 ? #session.myFileList.size-1 : (#session.page)*9+8}"
                        value="#session.myFileList" var="file" status="st">

                <a href="javascript:void(0);" onclick="submitForm(${st.index})">
                    <s:if test="#st.index % 3 == 0 ">
                        <br>
                    </s:if>
                    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4" style="height: 170px">
                        <form id="form_${st.index}" method="post"
                              action="${pageContext.request.contextPath}/DownLoadAction_downLoad">
                            <input type="hidden" name="file_id" value="${file.file_id}">
                        </form>
                        <img src="${pageContext.request.contextPath}/${file.icon}"><br>
                        <span>${file.filesFileName}</span>
                    </div>
                </a>

            </s:iterator>
        </div>

    </div>
</div>
</body>
<script>
    $(function () {
        $('#sort').ySelect();
        $('#screen').ySelect({numDisplayed: 5});
        $("#sort").prev().attr("id", "sortTable");
        $("#sortTable div[class='fs-option']").click(function () {
            window.location.href = "${pageContext.request.contextPath}/ListAction_" + $(this).attr("data-value");
        });
        $("#screenBtn").click(function () {
            var fileType = $("#screen").ySelectedValues(",");
            window.location.href = "${pageContext.request.contextPath}/ListAction_screenByFileType?fileType=" + fileType;
        });
    });

    function submitForm(id) {
        $("#form_" + id).submit();
    }
</script>
</html>
